<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
		<style>
			.ball{
				width: 20px;
				height: 20px;
				border-radius: 20px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--父组件调用子组件的时候可以通过 属性绑定的形式，把父组件的数据传给子组件使用-->
			<login :parentdata='msg'></login>
		
		</div>
		<template id="regster">
				<h2>这是一个新的全局组件</h2>
			
		</template>
		<script>
			
			var app = new Vue({
				el:'#app',
				data:{
					msg:'1 父组件中的数据',
				},
				methods:{
					
				},
				components:{
					
					//子组件中默认无法调用父组件的data上的数据和methods方法
					login:{
						data:function(){//子组件自身的数据 在子组件当中是可读可写的，props内的数据不是可写的，只可读
							return{
								title:"123",
								content:"qqq",
							}
						},
						template:"<h1>私有组件------{{parentdata}}---{{title}}----{{content}}</h1>",
						//组件中的所有的props都是父组件传递给子组件的
						props:{
							
							'parentdata':{
								type:String,
							},
						},//把父组件绑定的属性在子组件的props当中定义一下，才能使用父组件传递过来的数据
					}
				}
			});
		</script>
	</body>
</html>